<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="../styles/taobao.css">
  <link rel="stylesheet" href="../styles/shop.css">
  <link rel="Shortcut Icon" href="/front/favicon.ico">
  <link rel="stylesheet" href="/front/plugins/element-ui/index.css">
  <title>订单管理</title>
</head>
<body class="cart-taobao cart-lang-zh_CN">
<div class="middle-left">
</div>
<div class="middle-right">
  <div class="J_Toolkit">
    <div class="gw-toolkit">
      <div class="gw-toolkit-list">
        <div class="im-entry">
          <div class="im-top">
            <img src="../images/xiaoxi.png" class="im-icon" alt="">
          </div>
          <div class="im-bottom">消息</div>
        </div>
        <div class="toolkit-item toolkit-item-link">
          <a href="">
            <i class="toolkit-icon" style="background-image: url(../images/kefu.png)">
            </i>
            官方客服
          </a>
        </div>
        <div class="toolkit-item toolkit-item-link">
          <a href="">
            <i class="toolkit-icon" style="background-image: url(../images/反馈.png)">
            </i>
            反馈
          </a>
        </div>
        <div class="toolkit-item toolkit-item-link">
          <a href="">
            <i class="toolkit-icon" style="background-image: url(../images/jubao.png)">
            </i>
            举报
          </a>
        </div>

      </div>
    </div>
  </div>
</div>
<div class="middle-center" id="app">
  <!--        顶上的购物服务栏-->
  <div class="top">
    <div class="top-box">
      <div class="top-wrap clearfix">
        <!-- 左边的标志-->
        <div class="top-box-left">
          <a href="/front/index.html" role="img" class="logo-bd clearfix">
            <div class="logo">
              <h1 href="/front/index.html">
              </h1>
            </div>
          </a>
        </div>
        <!-- 中间的搜索框-->
        <div class="top-box-center">
          <div class="search-wrap">
            <div class="search-bd search-suggest search-suggest-group" id="J_Search">
              <div data-sg-type="tab">
                <ul class="search-suggest-tabs">
                  <li class="search-suggest-tabs-tab selected" data-value="item" name="宝贝">
                    宝贝
                    <div class="search-tab-icon">
                      <i>
                        <em></em>
                        <span></span>
                      </i>
                    </div>
                  </li>
                  <li class="search-suggest-tabs-tab selected" data-value="tmall" name="购物">
                    购物
                  </li>
                  <li class="search-suggest-tabs-tab selected" data-value="shop" name="店铺">
                    店铺
                  </li>
                </ul>
              </div>

              <!--分隔符-->
              <i class="search-split"></i>
              <!--搜索按钮-->
              <div class="search-button" @click="searchNow()">
                <button class="btn-search gw-bg">搜索</button>
              </div>
              <div data-sg-type="combobox" class="search-suggest-combobox">
                <el-input v-model="searchKeyword" placeholder="请输入内容" id="q" name="q" autofocus="true"
                          type="text" accesskey="s" style="border: none;"></el-input>
              </div>

            </div>
            <!-- 搜索框下边的分类-->
            <div class="search-ft J_SearchFt clearfix">
              <div class="J_gwSearchContent J_HotWord">
                <div class="search-hots">
                  <div class="search-hots-lines">
                    <div class="search-hots-fline" data-spm-ab="fline">
                      <a href="/front/index.html">新款连衣裙</a>
                      <a href="/front/index.html">四件套</a>
                      <a href="/front/index.html">潮流T恤</a>
                      <a href="/front/index.html">时尚男鞋</a>
                      <a href="/front/index.html">短裤</a>
                      <a href="/front/index.html">半身裙</a>
                      <a href="/front/index.html">男士外套</a>
                      <a href="/front/index.html">墙纸</a>
                      <a href="/front/index.html">行车记录仪</a>
                      <a href="/front/index.html">新款男鞋</a>
                    </div>
                    <div class="search-hots-sline" data-spm-ab="sline"></div>
                  </div>
                </div>
              </div>
              <div class="J_TmallSearchContent J_HotWord J-TmallHotWord tmall-hot-word"
                   data-spm-ab="tmallHotWord"></div>
            </div>
          </div>
        </div>
        <!--二维码-->
        <div class="top-box-right">
          <div class="gwh-qr J_Module" data-name="qr" data-spm="201858" data-bucket="A">
            <div class="qr">
              <a href="/front/index.html" class="qr-bd" clearfix>
                <span id="mgw" class="h">下载购物</span>
                <img class="qrcode" src="/front/images/code.png" aria-labelledby="mgw">
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="cart-layout-gw">
    <div id="J_Cart" class="cart" style="display: flex;justify-content: center;align-content: center;">
      <div class="dashboard-container">
        <!--    <el-button type="info" icon="el-icon-plus" round @click="addGoods()">新建商品</el-button>-->
        <el-table
                :data="tableData"
                stripe
                class="tableBox"
                style="width: 100%">
          <el-table-column
                  prop="goodsName"
                  label="商品名称"
                  width="200">
          </el-table-column>
          <el-table-column
                  prop="image"
                  label="图片"
                  width="200">
            <template slot-scope="{ row }">
              <el-image style="width: 100px; height: 100px; border:none;cursor: pointer;"
                        :src="getImage(row.image)"
                        :preview-src-list="[ `/common/download?name=${row.image}` ]">
                <div slot="error" class="image-slot">
                  <img src="./../../images/noImg.png" style="width: auto; height: 40px; border:none;">
                </div>
              </el-image>
            </template>
          </el-table-column>
          <el-table-column
                  prop="consignee"
                  label="收件人"
                  width="70">
          </el-table-column>
          <el-table-column
                  prop="address"
                  label="地址"
                  width="300">
          </el-table-column>
          <el-table-column
                  prop="phone"
                  label="手机号"
                  width="125">
          </el-table-column>
          <el-table-column
                  prop="price"
                  label="价格"
                  width="75">
          </el-table-column>
          <el-table-column
                  prop="amount"
                  label="数量"
                  width="50">
          </el-table-column>
          <el-table-column
                  prop="total"
                  label="总价"
                  width="75">
          </el-table-column>
          <el-table-column
                  prop="status"
                  label="状态"
                  width="75">
            <template slot-scope="scope">
              <span>{{ statusMap[scope.row.status] }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
  <div class="J_SiteFooter" style="min-height: 150px">
    <div class="gw-footer gw-footer-with-logo">
      <div class="gw-footer-hd">
        <p>
                            <span>
                                <a>阿里巴巴集团</a>
                            </span>
          <b>|</b>
          <span>
                                <a>购物网</a>
                            </span>
          <b>|</b>
          <span>
                                <a>购物</a>
                            </span>
          <b>|</b>
          <span>
                                <a>聚划算</a>
                            </span>
          <b>|</b>
          <span>
                                <a>全球速卖通</a>
                            </span>
          <b>|</b>
          <span>
                                <a>阿里巴巴国际交易市场</a>
                            </span>
          <b>|</b>
          <span>
                                <a>1688</a>
                            </span>
          <b>|</b>
          <span>
                                <a>阿里妈妈</a>
                            </span>
          <b>|</b>
          <span>
                                <a>飞猪</a></span>
          <b>|</b>
          <span>
                                <a>阿里云计算</a>
                            </span>
          <b>|</b>
          <span>
                                <a>AliOS</a>
                            </span>
          <b>|</b>
          <span>
                                <a>阿里通信</a>
                            </span>
          <b>|</b>
          <span>
                                <a>一淘</a>
                            </span>
          <b>|</b>
          <span>
                                <a>万网</a>
                            </span>
          <b>|</b>
          <span>
                                <a>高德</a>
                            </span>
          <b>|</b>
          <span>
                                <a>UC</a>
                            </span>
          <b>|</b>
          <span>
                                <a>友盟</a>
                            </span>
          <b>|</b>
          <span>
                                <a>阿里安全</a>
                            </span>
          <b>|</b>
          <span>
                                <a>大麦网</a>
                            </span>
          <b>|</b>
          <span>
                                <a>钉钉</a>
                            </span>
          <b>|</b>
          <span>
                                <a>支付宝</a>
                            </span>
          <b>|</b>
          <span>
                                <a>优酷</a>
                            </span>
          <b>|</b>
          <span>
                                <a>土豆</a>
                            </span>
          <b>|</b>
          <span>
                                <a>阿里健康</a>
                            </span>
          <b>|</b>
          <span>
                                <a>阿里影业</a>
                            </span>
          <b>|</b>
          <span>
                                <a>网商银行</a>
                            </span>
          <b>|</b>
          <span>
                                <a>造点新货（众筹）</a>
                            </span>
          <b>|</b>
        </p>
      </div>
      <div class="gw-footer-bd">
        <p>
                            <span>
                                <a>关于购物</a>
                            </span>
          <span>
                                <a>营销中心</a>
                            </span>
          <span>
                                <a>廉正举报</a>
                            </span>
          <span>
                                <a>联系客服</a>
                            </span>
          <span>
                                <a>开放平台</a>
                            </span>
          <span>
                                <a>诚征英才</a>
                            </span><span>
                                <a>联系我们</a>
                            </span>
          <span>
                                <a>隐私权政策</a>
                            </span>
          <span>
                                <a>法律声明</a>
                            </span>
          <span>
                                <a>知识产权</a>
                            </span>
          <span>
                                <a>不当竞争举报</a>
                            </span>
          <b>|</b>
          <em>© 2003-现在 Taobao.com 版权所有</em>
        </p>
        <p>
          <span>增值电信业务经营许可证：浙B2-20080224</span>
          <b>|</b>
          <span>增值电信业务经营许可证（跨地区）： B2-20150210</span>
          <b>|</b>
          <span>浙网文【2022】0403-017号</span>
          <b>|</b>
          <span>浙江省网络食品销售第三方平台提供者备案：浙网食A33010001</span>
          <b>|</b>
          <br>
        </p>
        <p>
          <span>互联网药品信息服务资格证书（浙）-经营性-2018-0010</span>
          <b>|</b>
          <span>短消息类服务接入代码使用证书：号【2016】00154-A01</span>
          <b>|</b>
          <span>信息网络传播视听许可证：1109364号</span>
          <b>|</b>
          <span>出版物网络交易平台服务经营备案号：新出发浙备字第002号</span>
          <b>|</b>
        </p>
        <p>
                            <span>
                                <a>
                                    <span class="gw-footer-mod"
                                          style="background-position: -861px 0px; width: 20px; height: 20px;);">
                                    </span>浙公网安备 33010002000078号
                                </a>
                            </span>
          <b>|</b>
          <span>
                                <a>浙B2-20080224-1</a>
                            </span>
          <b>|</b>
          <span>广播电视节目制作经营许可证（浙）字第01012号</span>
          <b>|</b>
          <span>市场名称登记证：工商网市字3301004120号</span>
          <b>|</b>
          <span>医疗器械网络交易服务第三方平台备案：（浙）网械平台备字[2018]第00004号</span>
          <b>|</b>
          <span>
                                <a>互联网违法和不良信息举报电话：0571-81683755 jubao.gw@service.taobao.com</a>
                            </span>
          <b>|</b>
          <span>
                                <a>中国扫黄打非网</a>
                            </span>
          <b>|</b>
          <span>
                                <a>全国文化和旅游市场网上举报投诉处理系统</a>
                            </span>
          <b>|</b>
          <span>
                                <a>全国12315平台</a>
                            </span>
          <b>|</b>
          <span><a>浙江省互联网违法和不良信息举报中心</a></span>
          <b>|</b>
          <span>
                                <a>全网举报</a>
                            </span>
          <b>|</b><br>
        </p>
      </div>
      <div class="gw-footer-ft">
        <a href="" class="gw-footer-mod" style="width: 30px;background-position: 0 0;"></a>
      </div>
    </div>
  </div>
</div>
</body>

<script src="/front/plugins/vue/vue.js"></script>
<!-- 引入组件库 -->
<script src="/front/plugins/element-ui/index.js"></script>
<!-- 引入axios -->
<script src="/front/plugins/axios/axios.min.js"></script>
<script src="/front/js/request.js"></script>
<script src="/backend/api/orders.js"></script>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                userInfo: '',
                userId: '',
                counts: '',
                searchKeyword: '',
                tableData: [],
                goodsState: '',
                statusMap: {
                    '1': '待付款',
                    '2': '待配送',
                    '3': '已派送',
                    '4': '已完成',
                    '5': '已取消'
                },
                value: ''
            }
        },
        mounted: function () {
            if (window.localStorage.getItem("userInfo") != null) {
                this.userInfo = window.localStorage.getItem("userInfo")
                this.userId = JSON.parse(this.userInfo).id
            }
            this.getOrders()
        },
        methods: {
            async getOrders() {
                let id = this.userId
                console.log(id)
                await queryOrdersByUserId(id).then(res => {
                    if (String(res.code) === '1') {
                        res.data.forEach(item => {
                            item.total = item.price * item.amount; // 替换'new value'为您想要的属性值
                            item.total = item.total.toFixed(2)
                        });
                        this.tableData = res.data
                    }
                }).catch(err => {
                    this.$message.error('请求出错了：' + err)
                })
            },
            getImage(image) {
                return `/common/download?name=${image}`
            },
            async searchNow() {
                window.location.href = '/front/page/search.html' + '?q=' + this.searchKeyword
            }
        }
    })
</script>
</html>